<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
    <c:set var="appName" value="${pageContext.request.contextPath}"></c:set>

    <head>
        <meta charset="utf-8">
        <title>
            嘀嗒理财
        </title>
        <meta name="description" content="Basic">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
        <!-- Call App Mode on ios devices -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Remove Tap Highlight on Windows Phone IE -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- base css -->
        <link rel="stylesheet" media="screen, print" href="${appName}/css/vendors.bundle.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/app.bundle.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/formplugins/select2/select2.bundle.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/datagrid/datatables/datatables.bundle.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/notifications/sweetalert2/sweetalert2.bundle.css">

        <link rel="stylesheet" media="screen, print" href="${appName}/css/lm/bootstrapStyle.css">
        <link rel="stylesheet" media="screen, print" href="${appName}/css/lm/lm.css">

        <!-- Place favicon.ico in the root directory -->
        <link rel="apple-touch-icon" sizes="180x180" href="${appName}/img/favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="${appName}/img/favicon/favicon-32x32.png">
        <link rel="mask-icon" href="${appName}/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
        <style>
            .select2{
                width: 60% !important;
            }
        </style>
    </head>
    <body class="mod-bg-1 ">
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper">
            <div class="page-inner">
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content" style="padding: 0.5rem 2rem;">
                        <div class="panel" style="min-height: 4rem;line-height:4rem;margin: 0 0 1rem 0;padding: 0 1rem">
                            <form action="${appName}/feedback/list" method="post" id="form-search">
                                <div class="col-xs-6 col-sm-6 col-md-3 col-xl-2 row custom-control-inline input-group date-range-area" style="min-width: 290px;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">反馈时间</span>
                                    </div>
                                    <input type="text" class="form-control" value="" id="date-range">
                                    <input type="hidden" name="startDate" class="startDate form-param">
                                    <input type="hidden" name="endDate" class="endDate form-param">
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-3 col-xl-2 row custom-control-inline input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">反馈人</span>
                                    </div>
                                    <input type="text" id="name" name="name" value="${bspEntity.name}" class="form-control form-param" placeholder="请输入客户姓名" aria-label="客户姓名">
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-3 col-xl-2 row custom-control-inline input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">回复人</span>
                                    </div>
                                    <input type="text" id="managerName" name="managerName" value="${bspEntity.managerName}" class="form-control form-param" placeholder="请输入回复人姓名" aria-label="回复人姓名">
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-2 col-xl-2 row custom-control-inline input-group search-content" style="min-width: 190px">

                                </div>
                            </form>
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr table-head-content">
                                        <h2>
                                            回复反馈信息
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <!-- datatable start -->
                                            <table id="data-table" class="table table-bordered table-hover table-striped w-100">
                                                <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>反馈人</th>
                                                        <th>反馈时间</th>
                                                        <th>反馈内容</th>
                                                        <th>回复人</th>
                                                        <th>回复内容</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                            <!-- datatable end -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                    <!-- this overlay is activated only when mobile menu is triggered -->
                    <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
                    <!-- BEGIN Page Footer -->
                    <footer class="page-footer" role="contentinfo">
                        <div class="d-flex align-items-center flex-1 text-muted">
                            <span class="hidden-md-down fw-700">2019 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
                        </div>
                        <div>
                            <ul class="list-table m-0">
                                <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
                                <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
                                <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
                                <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </footer>
                    <!-- END Page Footer -->
                    <!-- BEGIN Shortcuts -->
                    <!-- modal shortcut -->
                    <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <ul class="app-list w-auto h-auto p-0 text-left">
                                        <li>
                                            <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                    <i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Home
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_inbox_general.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
                                                    <i class="ni ni-envelope icon-stack-1x text-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Inbox
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                    <i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Add More
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> <!-- END Shortcuts -->
                </div>
            </div>
        </div>

        <!-- Modal center Large -->
        <div class="modal fade" id="modal-form" tabindex="-1" role="dialog"
             style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header" style="padding: 0.75rem 1.25rem">
                        <h2 class="modal-title"></h2>
                        <h6 class="small-title font-bold" style="margin: 10px 10px 5px 10px;color: #505050;"></h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fal fa-times"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary modal-submit">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- END Page Wrapper -->
        <!-- base vendor bundle:
			 DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations 
						+ pace.js (recommended)
						+ jquery.js (core)
						+ jquery-ui-cust.js (core)
						+ popper.js (core)
						+ bootstrap.js (core)
						+ slimscroll.js (extension)
						+ app.navigation.js (core)
						+ ba-throttle-debounce.js (core)
						+ waves.js (extension)
						+ smartpanels.js (extension)
						+ src/../jquery-snippets.js (core) -->
        <script src="${appName}/js/vendors.bundle.js"></script>
        <script src="${appName}/js/app.bundle.js"></script>
        <!-- datatble responsive bundle contains:
	+ jquery.dataTables.js
	+ dataTables.bootstrap4.js
	+ dataTables.autofill.js							
	+ dataTables.buttons.js
	+ buttons.bootstrap4.js
	+ buttons.html5.js
	+ buttons.print.js
	+ buttons.colVis.js
	+ dataTables.colreorder.js							
	+ dataTables.fixedcolumns.js							
	+ dataTables.fixedheader.js						
	+ dataTables.keytable.js						
	+ dataTables.responsive.js							
	+ dataTables.rowgroup.js							
	+ dataTables.rowreorder.js							
	+ dataTables.scroller.js							
	+ dataTables.select.js							
	+ datatables.styles.app.js
	+ datatables.styles.buttons.app.js -->
        <script src="${appName}/js/datagrid/datatables/datatables.bundle.js"></script>
        <script src="${appName}/js/formplugins/select2/select2.bundle.js"></script>
        <!-- Date range use moment.js same as full calendar plugin -->
        <script src="${appName}/js/dependency/moment/moment.js"></script>
        <script src="${appName}/js/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.js"></script>
        <script src="${appName}/js/notifications/sweetalert2/sweetalert2.bundle.js"></script>
        <script src="${appName}/js/lm/jquery.ztree.all.js.js"></script>
        <script src="${appName}/js/lm/lm.js"></script>

        <script>
            $(document).ready(function()
            {

                $(".select2-search").select2({
                    placeholder: "请选择",
                    allowClear: true
                });

                /**
                 * 初始化操作按钮权限
                 */
                $.common.ajaxPostJsonSuc("${appName}/getOperations","menuId="+parent.$(window.parent.document).find(".tab-menu-item.active").attr("data-id")
                    ,function (result) {
                    $.operation.operations = result.data;
                    $.operation.appName = "${appName}";
                    //初始化查询按钮
                     var searchShtml = $.operation.initOperation(null,1);
                     if(searchShtml){
                         $(".search-content").append(searchShtml);
                     }else{
                         $(".search-content").hide();
                     }
                    //初始化表头操作按钮
                    var tableHeadShtml = $.operation.initOperation(null,2);
                    if(tableHeadShtml){
                        $(".table-head-content").append(tableHeadShtml);
                    }
                });


                $(document).on("click", '.btn-reply',function(){
                    var id = "",name="";
                    var info = $(this).parent().siblings().eq(0).find("input");
                    id = info.attr("data-id");
                    name = info.attr("data-name");
                    var time = $(this).parent().siblings().eq(2).text();
                    var content = $(this).parent().siblings().eq(3).text();

                    $.modal.initModal($("#modal-form"))
                        .initSettings({
                            modalSize:"modal-lg",
                            formLabelClass:"col-md-2 ",
                            formInputClass:"col-md-10",
                        })
                        .addModalTitle($(this).text())
                        .addModalForm("${appName}/feedback/reply","post")
                        .addModalFormInput({title:"反馈人 <span class='text-danger'>*</span>",type:"text",name:"",value:name,msg:"反馈人",property:' readonly autocomplete="new-password" '})
                        .addModalFormInput({title:"反馈时间 <span class='text-danger'>*</span>",type:"text",name:"",value:time,msg:"反馈时间",property:' readonly autocomplete="new-password" '})
                        .addModalFormNode({title:"反馈内容 <span class='text-danger'>*</span>",node:'<textarea name="content" class="form-control" maxlength="2000" rows="10" readonly about="content" >'+content+'</textarea>'})
                        .addModalFormNode({title:"回复内容 <span class='text-danger'>*</span>",node:'<textarea name="replyContent" class="form-control" maxlength="2000" rows="10" about="haha" ></textarea>'})
                        .addModalFormInput({title:"id",type:"hidden",name:"id",value:id,msg:""});

                    $(".modal-submit").off().click(function() {
                        $.modal.ajaxSubmit("${appName}/feedback/list");
                    });
                });

                var _table = $('#data-table').dataTable({
                    aLengthMenu : [ [ 8, 12, 20, -1 ],
                        [ 8, 12, 20, "所有" ] ],
                    <%--pageLength : 10,--%>
                    bLengthChange:false,
                    "aaSorting": [[2, "desc"]],
                    "oLanguage" : {
                        "sUrl" : "${appName}/media/lm/zh_CN.json"
                    },
                    responsive: false,
                    // language:lang,  //提示信息
                    autoWidth: false,  //禁用自动调整列宽
                    stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
                    processing: true,  //隐藏加载提示,自行处理
                    serverSide: true,  //启用服务器端分页
                    searching: false,  //禁用原生搜索
                    // orderMulti: false,  //启用多列排序
                    // order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
                    renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
                    pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
                    iDisplayLength:8,
                    columnDefs: [{
                        "targets": 'nosort',  //列的样式名
                        "orderable": false    //包含上样式名‘nosort’的禁止排序
                    }],
                    ajax: function (data, callback, settings) {
                        $("#select-all,.select-one").prop("checked",false);
                        $(".btn-checkbox-1,.btn-checkbox-2").attr("disabled",true);

                        //封装请求参数
                        console.log(data);
                        var param = {};
                        param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                        param.start = data.start;//开始的记录序号
                        param.page = (data.start / data.length)+1;//当前页码
                        param.order = data.order[0];

                        if (data.order&&data.order.length&&data.order[0]) {
                            switch (data.order[0].column) {
                                case 1:
                                    param.orderColumn = "feedback_name";//数据库列名称
                                    break;
                                case 2:
                                    param.orderColumn = "create_time";//数据库列名称
                                    break;
                                case 3:
                                    param.orderColumn = "content";//数据库列名称
                                    break;
                                case 4:
                                    param.orderColumn = "reply_name";//数据库列名称
                                    break;
                                case 5:
                                    param.orderColumn = "reply_content";//数据库列名称
                                    break;
                                default:
                                    param.orderColumn = "create_time";//数据库列名称
                                    break;
                            }
                            //排序方式asc或者desc
                            param.orderDir = data.order[0].dir;
                        }

                        var a = $("#form-search").serializeArray();
                        $.each(a, function() {
                            if (param[this.name]) {
                                if (!param[this.name].push) {
                                    param[this.name] = [param[this.name]];
                                }
                                param[this.name].push(this.value || '');
                            } else {
                                param[this.name] = this.value || '';
                            }
                        });
                        console.log(param);

                        //ajax请求数据
                        $.ajax({
                            type: "POST",
                            url: "${appName}/feedback/listData",
                            cache: false,  //禁用缓存
                            data: param,  //传入组装的参数
                            dataType: "json",
                            success: function (result) {
                                var data = result.data;
                                console.log(result);
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = data.total;//返回数据全部记录
                                returnData.recordsFiltered = data.total;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = data.listData;//返回的数据列表

                                //console.log(returnData);
                                //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }
                        });
                    },

                    //列表表头字段
                    columns: [
                        {
                            "data": null,
                            "orderable" : false,//禁用排序
                            "render": function (data, type, row, meta) {
                                return '<input type="hidden" data-id="'+row.id+'" data-name="'+row.feedbackName+'">';
                            }
                        },
                        {"data": "feedbackName"},
                        {
                            "data": "createTime",
                            "render": function (data, type, row, meta) {
                                return data?moment(data).format("YYYY-MM-DD HH:mm:ss"):"";
                            }
                        },
                        {"data": "content"},
                        {"data": "replyName"},
                        {"data": "replyContent"},
                        {
                            "data": null,
                            "sClass": "text-center",
                            "render": function (data, type, row, meta) {
                                return $.operation.initOperation(row,3);
                            }
                        }
                    ],
                    fnDrawCallback:function () {
                        var api = this.api();
                        var startIndex = api.context[0]._iDisplayStart;//获取本页开始的条数
                        api.column(0).nodes().each(function(cell, i) {
                            cell.innerHTML = cell.innerHTML + (startIndex + i + 1);
                        });
                    }
                }).api();

                $(document).on("click", '.btn-search',function(){
                    _table.draw();
                });

                $('#date-range').daterangepicker({
                    startDate: moment().startOf('year'),
                    endDate: moment(),
                    autoUpdateInput:false,
                    showDropdowns: true,
                    showWeekNumbers: true,
                    locale: {
                        direction: 'ltr',
                        format: "YYYY-MM-DD",
                        separator: ' 至 ',
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        weekLabel: '周',
                        customRangeLabel: '自定义',
                        daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        firstDay: moment.localeData().firstDayOfWeek()
                    },
                    ranges:
                        {
                            '今天': [moment(), moment()],
                            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            '最近7天': [moment().subtract(6, 'days'), moment()],
                            '最近30天': [moment().subtract(29, 'days'), moment()],
                            '本月': [moment().startOf('month'), moment().endOf('month')],
                            '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        }
                }, function (start, end) {
                    $("#date-range").val(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'))
                    $(".startDate").val(start.format('YYYY-MM-DD'));
                    $(".endDate").val(end.format('YYYY-MM-DD'));
                });


                $(function()
                {
                    var start = "<fmt:formatDate value='${bspEntity.startDate}' pattern='yyyy-MM-dd'/>";
                    var end = "<fmt:formatDate value='${bspEntity.endDate}' pattern='yyyy-MM-dd'/>";

                    if(start || end){
                        $("#date-range").val(start + ' 至 ' + end)
                        $(".startDate").val(start.format('YYYY-MM-DD'));
                        $(".endDate").val(end.format('YYYY-MM-DD'));
                    }else{
                        $("#date-range").val("选择时间");
                        $(".startDate").val(null);
                        $(".endDate").val(null);
                    }
                });
            });

        </script>
    </body>
</html>